<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色彩认知挑战 - Stroop游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        
        .color-word {
            font-size: 3rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            transition: all 0.2s ease;
        }
        
        .color-word:active {
            transform: scale(0.95);
        }
        
        .game-button {
            transition: all 0.15s ease;
            transform: scale(1);
        }
        
        .game-button:active {
            transform: scale(0.95);
        }
        
        .pulse-animation {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .slide-in {
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .bounce-in {
            animation: bounceIn 0.5s ease-out;
        }
        
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .countdown-progress {
            position: relative;
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 0.5rem;
            transition: all 0.1s ease;
        }
        
        .countdown-progress.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .countdown-progress-bar {
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #22c55e, #22c55e);
            border-radius: 3px;
            transition: width ease-out, background ease-out;
            transform-origin: left;
        }
        
        .countdown-progress-bar.critical {
            background: linear-gradient(90deg, #ef4444, #ef4444);
            animation: criticalPulse 0.5s infinite alternate;
        }
        
        @keyframes criticalPulse {
            from { opacity: 0.8; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen">
    <!-- 主菜单界面 -->
    <div id="main-menu" class="min-h-screen flex flex-col justify-center items-center p-4">
        <div class="text-center mb-8 bounce-in">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
                色彩认知挑战
            </h1>
            <p class="text-gray-300 text-lg">训练你的大脑，挑战视觉干扰</p>
        </div>
        
        <div class="w-full max-w-sm space-y-4">
            <button id="time-mode-btn" class="game-button w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                ⏱️ 时间模式
            </button>
            <button id="life-mode-btn" class="game-button w-full bg-gradient-to-r from-red-500 to-rose-600 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                ❤️ 生命模式
            </button>
            <button id="leaderboard-btn" class="game-button w-full bg-gradient-to-r from-yellow-500 to-orange-600 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                🏆 排行榜
            </button>
            <button id="settings-btn" class="game-button w-full bg-gradient-to-r from-gray-600 to-slate-700 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                ⚙️ 设置
            </button>
        </div>
    </div>

    <!-- 用户名设置界面 -->
    <div id="username-setup" class="hidden min-h-screen flex flex-col justify-center items-center p-4">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 w-full max-w-md slide-in">
            <h2 class="text-2xl font-bold text-white mb-6 text-center">设置用户名</h2>
            <input type="text" id="username-input" placeholder="输入你的用户名" 
                   class="w-full p-4 rounded-xl bg-white/20 text-white placeholder-gray-300 text-lg mb-6 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <div class="space-y-3">
                <button id="confirm-username" class="game-button w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    确认
                </button>
                <button id="back-to-menu" class="game-button w-full bg-gray-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    返回
                </button>
            </div>
        </div>
    </div>

    <!-- 游戏界面 -->
    <div id="game-screen" class="hidden min-h-screen flex flex-col p-4">
        <!-- 游戏头部信息 -->
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-4 mb-4">
            <div class="flex justify-between items-center text-white">
                <div class="text-center">
                    <div class="text-sm text-gray-300">总题数</div>
                    <div id="total-questions" class="text-xl font-bold">0</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-300">正确率</div>
                    <div id="accuracy-display" class="text-xl font-bold">0%</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-300" id="timer-label">时间</div>
                    <div id="timer-display" class="text-xl font-bold">60</div>
                </div>
            </div>
        </div>

        <!-- 固定的进度条区域 -->
        <div class="px-4 mb-4">
            <!-- 固定高度的外层容器，防止布局跳动 -->
            <div class="h-6 flex items-center">
                <div id="countdown-progress" class="countdown-progress hidden w-full">
                    <div id="countdown-progress-bar" class="countdown-progress-bar"></div>
                </div>
            </div>
        </div>

        <!-- 游戏主区域 -->
        <div class="flex-1 flex flex-col justify-center items-center">
            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 w-full max-w-md text-center mb-6">
                <div id="color-word-container" class="mb-8">
                    <div id="color-word" class="color-word mb-2">红色</div>
                </div>
                <div class="space-y-4">
                    <button id="correct-btn" class="game-button w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                        ✓ 正确
                    </button>
                    <button id="wrong-btn" class="game-button w-full bg-gradient-to-r from-red-500 to-rose-600 text-white py-4 px-6 rounded-xl text-xl font-semibold shadow-lg">
                        ✗ 错误
                    </button>
                </div>
            </div>
        </div>

        <!-- 暂停按钮 -->
        <div class="text-center">
            <button id="pause-btn" class="game-button bg-gray-600 text-white py-3 px-8 rounded-xl text-lg font-semibold">
                ⏸️ 暂停
            </button>
        </div>
    </div>

    <!-- 游戏结束界面 -->
    <div id="game-over" class="hidden min-h-screen flex flex-col justify-center items-center p-4">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 w-full max-w-md text-center bounce-in">
            <h2 class="text-3xl font-bold text-white mb-6">游戏结束</h2>
            <div class="space-y-4 mb-8">
                <div class="bg-white/20 rounded-xl p-4">
                    <div class="text-gray-300 text-sm">总题数</div>
                    <div id="final-total-questions" class="text-2xl font-bold text-white">0</div>
                </div>
                <div class="bg-white/20 rounded-xl p-4">
                    <div class="text-gray-300 text-sm">正确题数</div>
                    <div id="final-correct-answers" class="text-2xl font-bold text-white">0</div>
                </div>
                <div class="bg-white/20 rounded-xl p-4">
                    <div class="text-gray-300 text-sm">错误题数</div>
                    <div id="final-wrong-answers" class="text-2xl font-bold text-white">0</div>
                </div>
                <div class="bg-white/20 rounded-xl p-4">
                    <div class="text-gray-300 text-sm">正确率</div>
                    <div id="final-accuracy" class="text-2xl font-bold text-white">0%</div>
                </div>
            </div>
            <div class="space-y-3">
                <button id="restart-btn" class="game-button w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    重新开始
                </button>
                <button id="back-menu-btn" class="game-button w-full bg-gray-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    返回主菜单
                </button>
            </div>
        </div>
    </div>

    <!-- 排行榜界面 -->
    <div id="leaderboard-screen" class="hidden min-h-screen flex flex-col p-4">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 mb-4">
            <h2 class="text-2xl font-bold text-white text-center mb-6">🏆 排行榜</h2>
            <div class="space-y-2">
                <div class="flex justify-between text-gray-300 text-sm border-b border-white/20 pb-2">
                    <span>用户名</span>
                    <span>题目数</span>
                    <span>正确率</span>
                </div>
                <div id="leaderboard-list" class="space-y-2">
                    <!-- 排行榜条目将在这里动态生成 -->
                </div>
            </div>
        </div>
        <div class="text-center">
            <button id="close-leaderboard" class="game-button bg-gray-600 text-white py-3 px-8 rounded-xl text-lg font-semibold">
                返回
            </button>
        </div>
    </div>

    <!-- 暂停菜单 -->
    <div id="pause-menu" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center p-4 z-50">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 w-full max-w-md text-center slide-in">
            <h3 class="text-2xl font-bold text-white mb-6">游戏暂停</h3>
            <div class="space-y-3">
                <button id="resume-btn" class="game-button w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    继续游戏
                </button>
                <button id="restart-game-btn" class="game-button w-full bg-gradient-to-r from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    重新开始
                </button>
                <button id="quit-game-btn" class="game-button w-full bg-gray-600 text-white py-3 px-6 rounded-xl text-lg font-semibold">
                    退出游戏
                </button>
            </div>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>